<!-- 商品的sku组件 -->
<template>
	<view class="wrap" v-show="isShow" @click.stop="toggle" @touchmove.stop.prevent="preventPop">
		<view class="container" @click.stop="preventPop">
			<view class="top">
				<image class="pic" :src="info.img" mode="scaleToFill"></image>
				<view class="info">
					<uni-icon class="close" type="close" :size="16" @click.native="toggle"></uni-icon>
					<p class="title">{{info.title}}</p>
					<p class="pri_storage">
						<text class="price">价格 1654 </text>
						<text class="storage">库存:{{info.storage}}</text>
					</p> 
					<p class="selected">请选择规格</p>
				</view>
				
			</view>
			<view class="center">
				<scroll-view class="specification" scroll-y>
					<view>1</view>
					<view>2</view>
					<view>3</view>
					<view>4</view>
				</scroll-view>
			</view>
			<view class="bottom">
				<view class="buy">加入购物车</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from './uni-icon.vue'
	export default {
		model:{
			prop: 'isShow',
			event: 'toggle'
		},
		props:{
			isShow: {
				type: Boolean,
				default: false
			},
			info: {
				type: Object
			}
		},
		data() {
			return {
			};
		},
		mounted() {
		},
		methods: {
			// 阻止滑动的冒泡事件
			preventPop() {
				return
			},
			toggle () {
				this.$emit('toggle', !this.isShow)
			}
		},
		components: {
			uniIcon
		}
	}
</script>

<style lang="scss">
.wrap {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1000;
	background-color: rgba(000,000,000, .3);
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 70%;
		padding: 24upx;
		padding-bottom: 0upx;
		box-sizing: border-box;
		background-color: #fff;
		border-top-left-radius: 16upx;
		border-top-right-radius: 16upx;
		.top {
			display: flex;
			padding-bottom: 16upx;
			border-bottom: 1px solid #e2e2e2;
			.pic {
				width: 220upx;
				height: 220upx;
			}
			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;
				flex: 1;
				padding: 24upx;
				.close {
					position: absolute;
					right: 0;
					top: 0;
				}
				.title {
					font-size: 34upx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.pri_storage {
					display: flex;
					justify-content: space-between;
					font-size: 24upx;
					.price {
						color: #FD6AB4;
					}
					.storage {
						color: #999;
					}
				}
				.selected {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		.center {
			flex: 1;
			overflow: hidden;
			.specification {
				height: 100%;
				background: #e2e2e2;
			}
		}
		.bottom {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 88upx;
			.buy {
				width: 100%;
				height: 66upx;
				line-height: 66upx;
				border-radius: 33upx;
				background-color: #FD6AB4;
				color: #fff;
				text-align: center;
			}
		}
	}
}
</style>
